<template>
    <div :class="props.class">
        <!-- <el-popover placement="left" v-model:visible="visible">
            <div class="del_confirm">
                <span>{{title}}</span>
                <div>
                    <span @click="visible = false">{{cancel}}</span>
                    <span class="cancel" @click="(e)=>{Click(e,'no')}" v-if="no">{{no}}</span>
                    <span @click="(e)=>{Click(e,'yes')}">{{yes}}</span>
                </div>
            </div>
            <template #reference> -->
                <el-button :class="[isclass]" :type="buttontype" @click="visible = true" :disabled="disabled">{{text}}</el-button>
            <!-- </template>
        </el-popover> -->
    </div>
    <div class="el-dialog-default">
        <el-dialog v-model="visible" :title="dialogtitle" width="30%">
                <span v-if="title&&!isSlot">{{title}}</span>
                <slot name="slot_1"></slot>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="visible = false">{{cancel}}</el-button>
                        <el-button type="danger" @click="(e)=>{Click(e,'no')}" v-if="no">{{no}}</el-button>
                        <el-button type="primary" @click="(e)=>{Click(e,'yes')}">确认</el-button>
                    </span>
                </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const emit = defineEmits(['yesClick','noClick'])

const props = defineProps({
    buttontype: { type: String, default: "danger" },
    dialogtitle: { type: String, default: "温馨提示" },
    title: { type: String, default: "确定要删除吗？" },
    yes:   { type: String, default: "确认" },
    no:    { type: String, default: "" },
    cancel:   { type: String, default: "取消" },
    text:  { type: String, default: "删除" },
    class: { type: String, default: "" },
    isclass:  { type: String, default: "del_btn" },
    disabled:  { type: Boolean, default: false },
    isSlot: { type: Boolean, default: false, }
})

let visible = ref(false)
let Click = (e,t) => {
    visible.value = false
    emit(t==='yes'?'yesClick':'noClick', e)
}
</script>

<style scoped>
    .del_confirm div { text-align: right; font-size: 12px; padding-top: 10px; }
    .del_confirm div span { margin-right: 5px; cursor: pointer;}
    .del_confirm div span:last-child { margin-right: 0; }
    .cancel{color: red;}
    .del_btn { background: #F56C6C; width: 50px !important; height: 28px !important; border-radius: 4px; border: none !important; font-size: 12px !important; color: #fff !important; cursor: pointer; display: flex; align-items: center; justify-content: center;}
</style>